<template>
  <div>
    <div class="margin-container-list">
      <!-- 10:未发布 20:待托管 30：平台审核中 40：报名中 50：待签约 60进行中 70已完成 80 已中止-->
      <div class="tab-style-default">
        <el-tabs v-model="taskStatus" @tab-click="taskStatusClick" >
          <el-tab-pane label="全部" name="0"></el-tab-pane>
          <el-tab-pane label="报名中" name="40"> </el-tab-pane>
          <el-tab-pane label="进行中" name="60" > </el-tab-pane>
          <el-tab-pane label="待验收" name="100" > </el-tab-pane>
          <el-tab-pane label="已验收" name="200" > </el-tab-pane>
          <el-tab-pane label="已完成" name="70" > </el-tab-pane>
          <el-tab-pane label="已中止" name="80" > </el-tab-pane>
          <el-tab-pane label="未发布" name="10" > </el-tab-pane>
          <el-tab-pane label="待托管" name="20" > </el-tab-pane>
        </el-tabs>
      </div>
      <div class="top-operate">
        <div>
          <div class="float-l">
            <el-input @keyup.enter.native="handleSearch" v-model="searchKeyword" placeholder="请输入任务名称" style="width: 300px"></el-input>
            <el-date-picker v-model="datePicker"
                    style="margin-left: 10px"
                    type="daterange"
                    unlink-panels
                    range-separator="至"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00', '23:59:59']"
                    start-placeholder="任务开始时间"
                    end-placeholder="任务结束时间">
            </el-date-picker>
            <el-button type="primary" @click="handleSearch" style="margin-left: 10px">查询</el-button>
          </div>
          <br>
          <div class="pad-t-10">
            <el-button @click="handleCreate" type="primary">新建任务</el-button>
          </div>
        </div>
      </div>
      <!-- 内容列表 -->
      <div class="table-container" v-show="showTabType==1 ">
        <el-table :data="taskInfoList" @selection-change="handleSelectionChange" v-loading="listLoading"
                  element-loading-text="加载中" style="width: 100%" >
          <el-table-column min-width="240px" label="任务名称" prop="taskName" fixed="left">
            <template slot-scope="scope">
              <div @click="handleDetail(scope.row)">
                <a><span style="color: #2d8cf0">{{scope.row.taskName}}</span></a>
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="240px" label="任务酬金" prop="budgetAmount" ></el-table-column>
          <el-table-column min-width="240px" label="任务类型" prop="categoryName" >
            <template slot-scope="scope">
              {{scope.row.oneCategoryName}}-{{scope.row.twoCategoryName}}
            </template>
          </el-table-column>
          <el-table-column min-width="240px" label="任务模式" prop="taskType" >
            <template slot-scope="scope" >
              <template v-if="scope.row.taskType == 1">
                <template v-if="scope.row.remunerationType == 1 && scope.row.remunerationTypeModel == 12">
                 {{ dict.remunerationType[scope.row.remunerationType]}} | {{ dict.remunerationTypeModel[scope.row.remunerationTypeModel]}}
                </template>
                <template v-else-if="scope.row.remunerationType == 1 && scope.row.remunerationTypeModel == 11">
                  {{ dict.remunerationType[scope.row.remunerationType]}} | {{ dict.remunerationTypeModel[scope.row.remunerationTypeModel]}}
                </template>
                <template v-else>
                  {{ dict.remunerationType[scope.row.remunerationType]}}
                </template>
              </template>
            </template>
          </el-table-column>
          <!--<el-table-column width="135px" label="组长" prop="nickName"></el-table-column>-->
          <el-table-column min-width="240px" label="任务开始时间" prop="taskStartTime" >
            <template slot-scope="scope">
              {{scope.row.taskStartTime | dateFilter }}
            </template>
          </el-table-column>
          <el-table-column min-width="240px" label="招募人数" prop="hireNum" >
            <template slot-scope="scope">
              <template v-if="scope.row.remunerationType == 1 && scope.row.remunerationTypeModel == 12">
                不限
              </template>
              <template v-else>
                {{scope.row.hireNum}}人
              </template>
            </template>
          </el-table-column>
          <el-table-column min-width="240px" label="状态" prop="taskType" >
            <template slot-scope="scope">
              <template v-if="scope.row.remunerationType == 1 && scope.row.remunerationTypeModel == 12 && scope.row.taskStatus == 40">
                进行中
              </template>
              <template v-else>
                {{ dict.taskStatus[scope.row.taskStatus]}}
              </template>
            </template>
          </el-table-column>
          <el-table-column min-width="160px" label="操作" align="right" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="medium" v-if="scope.row.canTaskEdit == 1" @click="handleUpdate(scope.row)">编辑</el-button>
              <el-button type="text" size="medium" v-if="scope.row.canTaskDelete == 1" @click="handleDelete(scope.row)">删除 </el-button>
              <el-button type="text" size="medium" v-if="scope.row.taskStatus == 20 " @click="trusteeship(scope.row.taskId)" >立即托管</el-button>
              <el-button type="text" size="medium" @click="handleDetail(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 立即托管弹窗 -->
      <el-dialog title="为保证双方利益，在托管酬金后微客才能报名参与任务" :visible.sync="financeVisible" :close-on-press-escape="true" class="payment-box" width="650px">
        <task-payment :taskId="payTaskId" v-if="financeVisible"></task-payment>
      </el-dialog>
      <!-- 列表分页 -->
      <div class="pagination" v-show="showTabType==1 ">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="taskInfoListQuery.currentPage"
                       :page-sizes="[10, 20, 50, 100]" :page-size="taskInfoListQuery.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
      <!-- 验收列表-->
      <task-info-run-tab ref="taskinfoRunTab" v-show="showTabType==2"
                         :dict = "dict"
                         :paymentStatus="paymentStatus"
                         :searchKeyword = "searchKeyword" :taskType = "taskType"
                         :datePicker="datePicker"></task-info-run-tab >
      <!-- 选择一级类目弹窗 -->
      <task-category></task-category>
    </div>
  </div>
</template>

<script>
  import { getTaskInfoList, stopTaskInfo, deleteTaskInfo } from '@/api/project/taskInfo'
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
  import taskInfoRunTab from './components/taskInfoRunTab'
  import taskCategory from './components/task-category'
  import { formatTimeToDate } from '@/api/common/date'
  import TaskPayment from '@/components/Finance/TaskPayment'

  export default {
    components: { taskInfoRunTab, taskCategory, TaskPayment },
    directives: {
      // 拖动窗口
      elDragDialog
    },
    data() {
      return {
        taskInfoList: [],
        total: null,
        listLoading: true,
        searchKeyword: '',
        financeVisible: false,
        multipleSelection: [],
        taskInfoListQuery: {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10
        },
        taskInfo: {
          taskInfoId: null,
          delFlag: 0,
          title: '',
          content: '',
          category: '',
          author: ''
        },
        dialogFormVisible: false, // 是否显示弹板
        showMoreBtn: false,
        rules: {
          categoryName: [
            { required: true, message: '分类名称', trigger: 'blur' }
          ]
        },
        oneCategoryId: '',
        twoCategoryId: '',
        threeCategoryId: '',
        taskType: '',
        taskStatus: '0', // 任务状态状态 10:未发布 20:待托管 30：平台审核中 40：报名中 50：待签约 60进行中 70已完成 80 已中止
        selMissionTypeId: '',
        showTabType: '1', // 1.标准 2.验收
        dict: {},
        isDict: false,
        payTaskId: '',
        paymentStatus: null,
        datePicker: []
      }
    },
    // 初始化页面
    created() {
      this.initTaskInfoList()
    },
    filters: {
      dateFilter(e) {
        if (e != null) {
          const date = formatTimeToDate(e)
          return date
        }
        return e
      }
    },
    mounted() {
      const that = this
      // 选择类目后
      this.$bus.$on('project.task.components.task-category-add', function(category) {
        if (category === null) {
          that.$message({
            message: '请选择一个符合需求的类型',
            type: 'error'
          })
          return
        }
        // 跳转页面
        const categoryId = category.categoryId
        that.$router.push({ path: '/project/task/edit/index', query: { categoryId: categoryId }})
      })
      this.$bus.$on('FinanceTaskPayment', function() {
        that.financeVisible = false
        this.initTaskInfoList()
      })
    },
    methods: {
      close() {
        this.dialogFormVisible = false
      },
      handleDialogClose() {
        this.dialogFormVisible = false
      },
      initTaskInfoList() {
        this.setKeywordType()
        this.listLoading = true
        getTaskInfoList(this.taskInfoListQuery).then(response => {
          this.taskInfoList = response.records
          this.total = response.total
          this.listLoading = false
          if (!this.isDict) {
            this.dict = response.dict
          }
        })
      },
      // 验收相关查询
      initTaskinfoRunTab() {
        this.$refs.taskinfoRunTab.initTaskCommissionList()
      },
      setKeywordType() {
        // 记录当前搜索条件
        if (this.oneCategoryId) {
          this.taskInfoListQuery['oneCategoryId'] = this.oneCategoryId
        }
        if (this.twoCategoryId) {
          this.taskInfoListQuery['twoCategoryId'] = this.twoCategoryId
        }
        if (this.threeCategoryId) {
          this.taskInfoListQuery['threeCategoryId'] = this.threeCategoryId
        }
        if (this.cooperationFilterType) {
          this.taskInfoListQuery['cooperationFilterType'] = this.cooperationFilterType
        }
        if (this.datePicker.length > 0) {
          this.taskInfoListQuery['startDate'] = this.datePicker[0]
          this.taskInfoListQuery['endDate'] = this.datePicker[1]
        }
        this.taskInfoListQuery['taskStatus'] = this.taskStatus
        this.taskInfoListQuery['taskName'] = this.searchKeyword
      },
      // 选择任务状态来查询
      taskStatusClick: function(tab, event) {
        this.handleSearch()
      },
      // 添加
      handleCreate() {
        this.$bus.$emit('project.task.edit.taskInfoCategory.show', 'add')
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.taskInfoListQuery.size = val
        this.initTaskInfoList()
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.taskInfoListQuery.currentPage = val
        this.initTaskInfoList()
      },
      // 勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 查询
      handleSearch() {
        var that = this
        this.taskInfoListQuery.currentPage = 1
        if (this.taskStatus === '100') {
          this.showTabType = 2
          this.paymentStatus = 1
          this.$nextTick(function() {
            that.initTaskinfoRunTab()
          })
        } else if (this.taskStatus === '200') {
          this.showTabType = 2
          this.paymentStatus = 2
          this.$nextTick(function() {
            that.initTaskinfoRunTab()
          })
        } else {
          this.showTabType = 1
          this.initTaskInfoList()
        }
      },
      // 查看详情
      handleDetail(row) {
        const taskId = row.taskId
        this.$router.push({ path: '/project/task/detail/index', query: { taskId: taskId }})
      },
      // 编辑
      handleUpdate(row) {
        // 清除赋值
        const taskId = row.taskId
        this.$router.push({ path: '/project/task/edit/index', query: { taskId: taskId }})
      },
      // 删除任务
      handleDelete(row) {
        this.$confirm('此操作将删除该任务，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteTaskInfo(row.taskId).then((response) => {
            if (response.isError) {
              return
            }
            this.initTaskInfoList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        }).catch(() => {})
      },
      // 查询
      querySearch(queryString, callback) {
        const agentList = this.agentList
        const results = queryString ? agentList.filter(this.createFilter(queryString)) : agentList
        // 调用 callback 返回建议列表的数据
        callback(results)
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      },
      handleSelect(item) {
        const agentId = item.agentId
        this.taskInfo.agentId = agentId
      },
      trusteeship(taskId) {
        this.payTaskId = taskId
        this.financeVisible = true
      },
      // 中止操作
      handleTaskStop(row) {
        const taskId = row.taskId
        stopTaskInfo(taskId).then(response => {
          this.initTaskInfoList()
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .mission-type {
    padding: 35px 38px;
    min-width: 150px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    margin: 25px 40px;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
  }
  .flex-cag-box{
    padding: 0px 0px 20px 70px;
    .mission-type:nth-child(4n){
      margin-right: 0px;
    }
  }
  .next-step-btn{
    padding: 13px 35px;
    font-size: 18px;
  }

  .sel-mission-type {
    background-color: #409eff;
    color: #fff;
  }

  .budget-el-select {
    padding-top: 10px;
    padding-left: 50px;
  }
</style>
